<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <style>
        #picture{
            position: relative;
            top:100px;
            left:100px;
            width: 730px;
            height: 450px;

        }
        .pig img{
            position: absolute;
            top:0;
            left:0;
            width: 730px;
            height: 450px;
        }
        .arrow-l,.arrow-r{
            position: absolute;
            top: 50%;
            transform: translateY(-25px);
            width: 50px;
            height:50px;
            background-color:rgb(155, 175, 179);
            opacity: 0.8;
            text-decoration: none;
            font-size: 35px;
            z-index: 1;
            text-align: center;
            vertical-align: middle;
        }
        .arrow-r{
            right:0;
        }
    </style>
</head>
<body>
    <div id="picture">
        <a href="javascript:;" class="arrow-r" @click="next" v-show="index<imgSrc.length-1">&gt</a>
        <a href="javascript:;" class="arrow-l" @click="pre" v-show="index!=0">&lt</a>
        <div class="pig">
            <img :src="imgSrc[index]" alt="">
        </div>
    </div>

    <script>
      let app=new Vue({
          el:"#picture",
          data:{
            imgSrc:['upload/banner1.jpg','upload/banner2.jpg','upload/banner3.jpg'],
            index:0,
          },
          methods: {
              pre:function(){
                  if(this.index>0){
                    this.index--;
                  }
        
              },
              next:function(){
                  if(this.index<this.imgSrc.length-1){
                    this.index++;
                  }
              }
          },

      });  
    </script>
</body>
</html>